<template>
  <div class="app-container">
    <!-- 查询 -->
    <div class="cardBox">
      <el-form :inline="true" ref="form" :model="searchForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="19">
            <el-form-item label="产品名称">
              <el-input
                v-model="searchForm.sg_name"
                placeholder="请输入产品名称"
                clearable
              />
            </el-form-item>

            <el-form-item label="商品类型">
              <el-select
                v-model="searchForm.type"
                placeholder="商品类型"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="支付类型">
              <el-select
                v-model="searchForm.pay_type_ids"
                placeholder="支付类型"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in payTypeList"
                  :key="item.id"
                  :label="item.tag_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="上架状态">
              <el-select
                v-model="searchForm.status"
                placeholder="上架状态"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5" style="text-align: right">
            <el-form-item>
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="doSearchGoods"
                >查询</el-button
              >
              <el-button
                icon="el-icon-refresh"
                type="primary"
                @click="resetSearch"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 选品列表 -->
    <div class="cardBox" style="margin-top: 20px">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col>
            <el-button
              v-hasPermi="'selecgoods/add'"
              icon="el-icon-circle-plus-outline"
              type="primary"
              size="small"
              @click="addGoods"
              >添加选品</el-button
            >
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="30">
        <el-col>
          <el-table
            v-loading="loading"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            highlight-current-row
            :data="goodsList"
            style="width: 100%"
          >
            <el-table-column prop="id" align="center" label="商户ID" />
            <el-table-column prop="sg_id" align="center" label="供货商产品ID" />
            <el-table-column
              prop="sg_name"
              align="center"
              label="供货商产品名称"
            />

            <el-table-column
              prop="product_code"
              align="center"
              label="商品编码"
            />
            <el-table-column prop="type_text" align="center" label="产品类型" />
            <el-table-column prop="main_image" label="商品主图" align="center">
              <template slot-scope="scope">
                <div style="width: 50px; height: 50px; margin: 0 auto">
                  <el-image
                    v-if="scope.row.main_image"
                    style="width: 50px; height: 50px"
                    :src="scope.row.main_image"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              align="center"
              label="状态"
              v-hasPermi="'selecgoods/status'"
            >
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="2"
                  @change="switchShowWay(scope.row)"
                />
              </template>
            </el-table-column>
            <!-- <el-table-column prop="lnstructions" align="center" label="说明"></el-table-column> -->
            <el-table-column
              prop="created_at"
              align="center"
              label="创建时间"
            />
            <el-table-column
              fixed="right"
              align="center"
              width="220"
              prop="address"
              label="操作"
            >
              <template slot-scope="scope">
                <!-- {{apply_status}} -->

                <el-button
                  type="primary"
                  size="mini"
                  @click="goEditGoodsOrDetail(scope.row, false)"
                >
                  选品详情
                </el-button>
                <el-button
                  v-hasPermi="'selecgoods/edit'"
                  type="primary"
                  size="mini"
                  @click="goEditGoods(scope.row, true)"
                >
                  编辑
                </el-button>
                <el-popconfirm
                  title="确定删除吗？"
                  @confirm="delSelectGoods(scope.row)"
                >
                  <el-button
                    v-hasPermi="'selecgoods/del'"
                    style="margin-left: 10px"
                    slot="reference"
                    type="danger"
                    size="mini"
                  >
                    删除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table></el-col
        >
      </el-row>
      <el-row class="marginTop" style="text-align: right">
        <el-pagination
          :current-page="searchForm.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="searchForm.count"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>

    <!-- 详情 -->
    <el-drawer
      title="选品详情"
      size="800px"
      :visible.sync="dialogdictionary"
      :direction="direction"
    >
      <div style="position: relative; padding: 30px" v-loading="btnLoading">
        <el-descriptions class="margin-top" title="商品信息" :column="3" border>
          <el-descriptions-item label="商品名称">
            {{
              updateGoodsFrom.sg_name ? updateGoodsFrom.sg_name : "无"
            }}</el-descriptions-item
          >
          <el-descriptions-item label="商品ID">
            {{ updateGoodsFrom.id }}</el-descriptions-item
          >
          <el-descriptions-item label="库存数量">
            {{
              updateGoodsFrom.sku ? updateGoodsFrom.sku.inventory : ""
            }}</el-descriptions-item
          >
          <el-descriptions-item label="提货价格">
            {{
              updateGoodsFrom.sku ? updateGoodsFrom.sku.take_delivery_price : ""
            }}</el-descriptions-item
          >
          <el-descriptions-item label="提货券价格">
            {{
              updateGoodsFrom.sku ? updateGoodsFrom.sku.voucher_price : ""
            }}</el-descriptions-item
          >
          <el-descriptions-item label="提货券价格">
            {{
              updateGoodsFrom.sku ? updateGoodsFrom.sku.voucher_price : ""
            }}</el-descriptions-item
          >
          <el-descriptions-item label="平台分类">
            {{
              updateGoodsFrom.sku ? updateGoodsFrom.sku.gc_name : ""
            }}</el-descriptions-item
          >
        </el-descriptions>
        <el-descriptions
          style="margin-top: 30px"
          class="margin-top"
          title="价格参考"
          :column="3"
          border
        >
          <el-descriptions-item label="现金参考价">
            {{
              updateGoodsFrom.sku
                ? updateGoodsFrom.sku.suggestion_price.retail_price
                : "无"
            }}</el-descriptions-item
          >
          <el-descriptions-item label="积分参考价">
            {{
              updateGoodsFrom.sku
                ? updateGoodsFrom.sku.suggestion_price.integral_price
                : "无"
            }}</el-descriptions-item
          >
          <el-descriptions-item label="积分参考手续费">
            {{
              updateGoodsFrom.sku
                ? updateGoodsFrom.sku.suggestion_price.integral_scale
                : ""
            }}</el-descriptions-item
          >
          <el-descriptions-item label="提货券参考价">
            {{
              updateGoodsFrom.sku
                ? updateGoodsFrom.sku.suggestion_price.voucher_price
                : ""
            }}</el-descriptions-item
          >
          <el-descriptions-item label="提货券参考手续费">
            {{
              updateGoodsFrom.sku
                ? updateGoodsFrom.sku.suggestion_price.voucher_scale
                : ""
            }}</el-descriptions-item
          >
        </el-descriptions>
        <el-descriptions
          style="margin-top: 30px"
          title="针对用户的规则"
          :column="3"
          border
        >
          <el-descriptions-item label="支付类型">
            <el-tag
              v-if="
                updateGoodsFrom.for_user_info
                  ? updateGoodsFrom.for_user_info.pay_type == 1
                  : ''
              "
              size="mini"
              >现金</el-tag
            >
            <el-tag
              v-if="
                updateGoodsFrom.for_user_info
                  ? updateGoodsFrom.for_user_info.pay_type == 2
                  : ''
              "
              size="mini"
              >积分</el-tag
            >
            <el-tag
              v-if="
                updateGoodsFrom.for_user_info
                  ? updateGoodsFrom.for_user_info.pay_type == 3
                  : ''
              "
              size="mini"
              >提货券</el-tag
            >
            <el-tag
              v-if="
                updateGoodsFrom.for_user_info
                  ? updateGoodsFrom.for_user_info.pay_type == 4
                  : ''
              "
              size="mini"
              >积分+提货券</el-tag
            >
            <el-tag
              v-if="
                updateGoodsFrom.for_user_info
                  ? updateGoodsFrom.for_user_info.pay_type == 5
                  : ''
              "
              size="mini"
              >现金+积分</el-tag
            >
            <el-tag
              v-if="
                updateGoodsFrom.for_user_info
                  ? updateGoodsFrom.for_user_info.pay_type == 6
                  : ''
              "
              size="mini"
              >现金+提货券</el-tag
            >
            <el-tag
              v-if="
                updateGoodsFrom.for_user_info
                  ? updateGoodsFrom.for_user_info.pay_type == 7
                  : ''
              "
              size="mini"
              >现金+积分+提货券</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item label="销售倍数区间">
            {{
              updateGoodsFrom.for_user_info
                ? updateGoodsFrom.for_user_info.sales_multiplier
                : "无"
            }}</el-descriptions-item
          >
          <el-descriptions-item label="关联用户标签">
            <el-tag
              style="margin: 3px"
              :key="index"
              v-for="(item, index) in updateGoodsFrom.for_user_info
                ? updateGoodsFrom.for_user_info.related_user_tag_text
                : []"
              size="mini"
              >{{ item.tag_name }}</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item label="关联用户分组">
            <el-tag
              style="margin: 3px"
              :key="index"
              v-for="(item, index) in updateGoodsFrom.for_user_info
                ? updateGoodsFrom.for_user_info.related_user_group_text
                : []"
              size="mini"
              >{{ item.name }}</el-tag
            >
            <!-- {{
              updateGoodsFrom.for_user_info
                ? updateGoodsFrom.for_user_info.related_user_group_text
                : "无"
            }} -->
          </el-descriptions-item>
          <el-descriptions-item label="关联用户关系">
            <el-tag
              style="margin: 3px"
              :key="index"
              v-for="(item, index) in updateGoodsFrom.for_user_info
                ? updateGoodsFrom.for_user_info.invitation_relationship_text
                : []"
              size="mini"
              >{{ item.nickname }}</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item label="关联省市区地域" :span="3">
            <el-tag
              style="margin: 3px"
              :key="index"
              v-for="(item, index) in updateGoodsFrom.for_user_info
                ? updateGoodsFrom.for_user_info.area_name
                : []"
              size="mini"
            >
              <span v-for="(items, indexs) in item" :key="indexs">{{
                items.name
              }}</span>
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="是否优选推荐">
            <el-tag
              v-if="
                updateGoodsFrom.for_user_info
                  ? updateGoodsFrom.for_user_info.is_recommendation == 1
                  : ''
              "
              size="mini"
              >是</el-tag
            >
            <el-tag v-else type="danger" size="mini">否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="是否限购">
            <el-tag
              v-if="
                updateGoodsFrom.for_user_info
                  ? updateGoodsFrom.for_user_info.is_restricted == 1
                  : ''
              "
              size="mini"
              >是</el-tag
            >
            <el-tag v-else type="danger" size="mini">否</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="每日限购数量">
            <span
              v-if="
                updateGoodsFrom.for_user_info
                  ? updateGoodsFrom.for_user_info.is_restricted == 0
                  : ''
              "
            >
              不限购
            </span>
            <span v-else>{{
              updateGoodsFrom.for_user_info
                ? updateGoodsFrom.for_user_info.daily_purchase_limit
                : ""
            }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="用户总限购数量">
            <span
              v-if="
                updateGoodsFrom.for_user_info
                  ? updateGoodsFrom.for_user_info.is_restricted == 0
                  : ''
              "
            >
              不限购
            </span>
            <span v-else>{{
              updateGoodsFrom.for_user_info
                ? updateGoodsFrom.for_user_info.total_purchase_limit
                : ""
            }}</span>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          style="margin-top: 30px"
          class="margin-top"
          title="针对商户的规则"
          :column="3"
          border
        >
          <el-descriptions-item label="提货方式">
            <el-tag
              v-if="
                updateGoodsFrom.for_mer_info
                  ? updateGoodsFrom.for_mer_info.pay_type == 1
                  : ''
              "
              size="mini"
              >现金</el-tag
            >
            <el-tag
              v-if="
                updateGoodsFrom.for_mer_info
                  ? updateGoodsFrom.for_mer_info.pay_type == 2
                  : ''
              "
              size="mini"
              >积分</el-tag
            >
            <el-tag
              v-if="
                updateGoodsFrom.for_mer_info
                  ? updateGoodsFrom.for_mer_info.pay_type == 3
                  : ''
              "
              size="mini"
              >提货券</el-tag
            >
            <el-tag
              v-if="
                updateGoodsFrom.for_mer_info
                  ? updateGoodsFrom.for_mer_info.pay_type == 4
                  : ''
              "
              size="mini"
              >积分+提货券</el-tag
            >
            <el-tag
              v-if="
                updateGoodsFrom.for_mer_info
                  ? updateGoodsFrom.for_mer_info.pay_type == 5
                  : ''
              "
              size="mini"
              >现金+积分</el-tag
            >
            <el-tag
              v-if="
                updateGoodsFrom.for_mer_info
                  ? updateGoodsFrom.for_mer_info.pay_type == 6
                  : ''
              "
              size="mini"
              >现金+提货券</el-tag
            >
            <el-tag
              v-if="
                updateGoodsFrom.for_mer_info
                  ? updateGoodsFrom.for_mer_info.pay_type == 7
                  : ''
              "
              size="mini"
              >现金+积分+提货券</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item label="当前可选商户">
            <el-tag
              style="margin: 3px"
              :key="index"
              v-for="(item, index) in updateGoodsFrom.for_mer_info
                ? updateGoodsFrom.for_mer_info.selection_limit_text
                : []"
              size="mini"
              >{{ item.name }}</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item label="是否限制改价">
            <el-tag
              v-if="
                updateGoodsFrom.for_mer_info
                  ? updateGoodsFrom.for_mer_info.change_price_limit.type == 1
                  : ''
              "
              size="mini"
              >不限制</el-tag
            >
            <el-tag
              v-if="
                updateGoodsFrom.for_mer_info
                  ? updateGoodsFrom.for_mer_info.change_price_limit.type == 2
                  : ''
              "
              size="mini"
              >不可改价</el-tag
            >
            <el-tag
              v-if="
                updateGoodsFrom.for_mer_info
                  ? updateGoodsFrom.for_mer_info.change_price_limit.type == 3
                  : ''
              "
              size="mini"
              >须在规定范围内改价</el-tag
            >
            <el-tag
              v-if="
                updateGoodsFrom.for_mer_info
                  ? updateGoodsFrom.for_mer_info.change_price_limit.type == 4
                  : ''
              "
              size="mini"
              >只允许增加建议零售价</el-tag
            >
            <el-tag
              v-if="
                updateGoodsFrom.for_mer_info
                  ? updateGoodsFrom.for_mer_info.change_price_limit.type == 5
                  : ''
              "
              size="mini"
              >只允许减少建议零售价</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item
            label="可增加比例"
            v-if="
              updateGoodsFrom.for_mer_info
                ? updateGoodsFrom.for_mer_info.change_price_limit.type == 3
                : false
            "
          >
            {{
              updateGoodsFrom.for_mer_info
                ? updateGoodsFrom.for_mer_info.change_price_limit.values
                    .increment
                : ""
            }}</el-descriptions-item
          >
          <el-descriptions-item
            label="可减少比例"
            v-if="
              updateGoodsFrom.for_mer_info
                ? updateGoodsFrom.for_mer_info.change_price_limit.type == 3
                : false
            "
          >
            {{
              updateGoodsFrom.for_mer_info
                ? updateGoodsFrom.for_mer_info.change_price_limit.values
                    .decrement
                : ""
            }}</el-descriptions-item
          >
        </el-descriptions>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  selectiondetail,
  selectiondestroy,
  selectionaudit,
  merchantselectionlst,
  selectionedit,
  detailSelection,
} from "@/api/merchant/index";
import { getDictionaryValueList } from "@/api/admin/dictionary.js";
import { getCategoryList } from "@/api/commodity/index";
export default {
  name: "SelectGoods",
  data() {
    return {
      loading: false,
      isShowAddGoodsDialog: false,
      btnLoading: false,
      dialogdictionary: false,
      activeName: "选品信息",
      subLoading: false,
      direction: "rtl", // 抽屉的出来形式
      // 选品详情是否处于编辑模式
      modifyShow: false,
      //   修改选品的表单
      updateGoodsFrom: {},
      updateGoodsRules: {},
      typeList: [
        {
          value: 1,
          label: "普通商品",
        },
        {
          value: 2,
          label: "卡密商品",
        },
        {
          value: 3,
          label: "虚拟商品",
        },
      ],
      payTypeList: [], // 支付方式列表
      statusList: [
        {
          value: 1,
          label: "上架",
        },
        {
          value: 2,
          label: "下架",
        },
      ], // 上架状态列表

      searchForm: {
        page: 1,
        count: 10,
      },
      goodsList: [], // 选品列表
      tempUpdatePayTypeList: [], // 选品更新时的支付方式
      tempUpdateCategoryId: "", // 选品分类改变
      goodsCategoryList: [], // 商品分类列表
      inventoryForm: {}, // 库存规格
      total: 0,
      rules: {
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("名称不能为空"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        security_deposit: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入保证金"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        demand: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入类型要求"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        lnstructions: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入说明"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请选择状态"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      },
    };
  },

  created() {
    this.doSearchGoods();
    this.getPayTypeList();
    this.getGoodsCategoryList();
  },
  methods: {
    // 获取支付方式
    async getPayTypeList() {
      const res = await getDictionaryValueList({
        DictionaryId: 10,
      });
      const { code, data, message } = res;
      if (code === 200) {
        this.payTypeList = data.list;
      } else {
        this.$message.error(message);
      }
    },
    // 查询选品列表
    doSearchGoods() {
      this.loading = true;
      merchantselectionlst(this.searchForm)
        .then((res) => {
          this.loading = false;
          if (res.code !== 200) {
            this.$messages.error(res.msg);
            return;
          }
          this.total = res.data.total;
          this.goodsList = res.data.list;
          this.goodsList.map((val) => {
            // (1.待审核,2.审核通过,3.审核未通过)
            if (val.apply_status === 1) {
              val.apply_text = "待审核";
            } else if (val.apply_status === 2) {
              val.apply_text = "审核通过";
            } else if (val.apply_status === 3) {
              val.apply_text = "审核未通过";
            }
            // "apply_type": 1, //审核类型(1.申请入驻,2.商户资料修改)
            if (val.type === 1) {
              val.type_text = "普通商品";
            } else if (val.type === 2) {
              val.type_text = "卡密商品";
            } else if (val.type === 3) {
              val.type_text = "虚拟商品";
            }
          });
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 修改选品状态
    switchShowWay(val) {
      this.loading = true;

      selectionaudit({ id: val.id, status: val.status })
        .then((res) => {
          if (res.code === 200) {
            this.$messages.success("修改成功");
            this.doSearchGoods();
          } else {
            this.$messages.error(res);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 修改选品
    goEditGoods(row) {
      this.$router.push("/merchant/selecgoods/add?id=" + row.id);
    },
    // 重置选品列表搜索
    resetSearch() {
      this.searchForm = this.$options.data().searchForm;
      this.doSearchGoods();
    },
    // 添加选品
    addGoods() {
      this.$router.push("/merchant/selecgoods/add");
    },

    // 查看选品详情或者修改选品
    goEditGoodsOrDetail(row, isEdit) {
      // this.title = "编辑选品";
      this.dialogdictionary = true;
      this.btnLoading = true;
      // this.modifyShow = isEdit;
      detailSelection({ id: row.id })
        .then((res) => {
          this.btnLoading = false;
          this.updateGoodsFrom = res.data;
          console.log(this.updateGoodsFrom);
        })
        .catch(() => {
          this.$messages.error("获取数据失败,请重试");
          this.btnLoading = false;
          this.dialogdictionary = false;
        });
    },
    // 根据支付ID 获取支付name
    getPayTypeStr(payTypeIdsStr) {
      if (!payTypeIdsStr) return;
      const idsArr = payTypeIdsStr.split(",");
      // console.log('idsArr==>', idsArr)
      const filterItems = this.payTypeList.filter((item) =>
        idsArr.includes(item.id)
      );
      let nameStr = "";
      if (filterItems.length > 0) {
        nameStr = filterItems.map((item) => item.tag_name);
      }
      return nameStr;
    },
    // 获取商品类目
    async getGoodsCategoryList() {
      const res = await getCategoryList();
      const { code, data, message } = res;
      if (code === 200) {
        this.goodsCategoryList = data;
        this.buildGoodsCategoryList(this.goodsCategoryList);
      } else {
        this.$message.error(message);
      }
    },
    // 把children为零的字段删除
    buildGoodsCategoryList(list) {
      for (let i = 0; i < list.length; i++) {
        const item = list[i];
        if (item.children && item.children.length === 0) {
          delete item.children;
        }
        if (item.children && item.children.length > 0) {
          this.buildGoodsCategoryList(item.children);
        }
      }
    },
    // 选品类目发生改变
    handleGoodsCategoryChange(value) {
      console.log("value==>", value);
    },
    // 更新选品
    doUpdate() {
      this.$refs.updateGoodsFromComp.validate(async (valid) => {
        if (valid) {
          // 更新
          const res = await selectionedit(this.updateGoodsFrom);
          console.log("res=>", res);
        } else {
          this.$message.error("请检查：有部分信息或图片尚未添加完整！");
        }
      });
    },

    // 删除选品
    delSelectGoods(row, index) {
      selectiondestroy({ id: row.id }).then((res) => {
        if (res.code === 200) {
          this.$messages.success("删除成功");
          this.doSearchGoods();
        } else {
          this.$messages.error(res.msg);
        }
      });
    },
    // 商户分类切换分页
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.doSearchGoods();
    },
    // 商户分类切换每页数量
    handleSizeChange(val) {
      this.searchForm.count = val;
      this.getListWay();
    },
  },
};
</script>

<style lang="scss">
.margin-10 {
  margin: 10px;
}

.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
}

.sn {
  color: #606266;
  font-size: 13px;
}

.demo-table-expand {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  color: #515a6e;

  div {
    width: 30%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
  }
}

.marginTop {
  padding: 0 15px !important;
}

.sn {
  color: #606266;
  font-size: 13px;
}

.order_center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 0;
  font-size: 13px;
  color: #666;
}

.input-with-select .el-select .el-input {
  width: 110px !important;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

#editinput .el-select .el-input {
  width: 440px !important;
}

.commont-title {
  font-size: 16px;
  font-weight: 600;
}

label {
  font-weight: normal;
  font-size: 12px;
}
</style>
